<template>
	<view class="warp">
		<view class="uni-margin-wrap">
			<view class="uni-back-view">
				<view class="uni-item-view">
					<view class="uni-item-view-left">
						<view class="uni-item-view-left-image"><image class="image" :src="'/static/login/login_username.png'"></image></view>
						<view class="uni-item-view-left-input"><input class="uni-input input" type="text" placeholder="昵称" v-model="inputData.nickname" /></view>
					</view>
					<view class="uni-item-view-right">
						<view><text></text></view>
					</view>
				</view>
				<view class="uni-item-view">
					<view class="uni-item-view-left">
						<view class="uni-item-view-left-image"><image class="image" :src="'/static/login/login_mobile.png'"></image></view>
						<view class="uni-item-view-left-input"><input class="uni-input input" type="text" placeholder="手机号" v-model="inputData.mobile" /></view>
					</view>
					<view class="uni-item-view-right">
						<view><text></text></view>
					</view>
				</view>
				<view class="uni-item-view">
					<view class="uni-item-view-left">
						<view class="uni-item-view-left-image"><image class="image" :src="'/static/login/login_pwd.png'"></image></view>
						<view class="uni-item-view-left-input">
							<input class="uni-input input" type="text" placeholder="请输入密码(密码长度不小于8位)" :password="true" v-model="inputData.password" />
						</view>
					</view>
					<view class="uni-item-view-right">
						<view><text></text></view>
					</view>
				</view>
				<view class="uni-item-view">
					<view class="uni-item-view-left">
						<view class="uni-item-view-left-image"><image class="image" :src="'/static/login/login_pwd.png'"></image></view>
						<view class="uni-item-view-left-input">
							<input class="uni-input input" type="text" placeholder="请输入确认密码" :password="true" v-model="inputData.configpwd" />
						</view>
					</view>
					<view class="uni-item-view-right">
						<view><text></text></view>
					</view>
				</view>
				<view class="uni-item-view">
					<view class="uni-item-view-left">
						<view class="uni-item-view-left-image"><image class="image" :src="'/static/login/login_code.png'"></image></view>
						<view class="uni-item-view-left-input"><input class="uni-input input" type="text" placeholder="验证码" v-model="inputData.code" /></view>
					</view>
					<view class="uni-item-view-right" @click="sendClick">
						<!-- <view class="code-text"><text>获取验证码</text></view> -->
						<view v-if="showText == true" class="code-text">发送验证码</view>
						<view v-else class="code-text">{{ second }}s重新发送</view>
					</view>
				</view>

				<!-- <view class="uni-item-view2">
					<view class="uni-item-view-xieyi"> 
						<view class="uni-item-view-xieyi-group">
							<checkbox-group @change="checkboxChange">
								<view class="checkbox-list" v-for="item in hobby" :key="item.value">
									<checkbox class="checkbox-view" :value="item.value" :checked="item.checked" />
									<text class="text">{{ item.name }}</text>
								</view>
							</checkbox-group>
						</view>
						
						<text class="text1" @click="xiyiClick">《服务协议及说明》</text>
					</view>
				</view> -->
				<view class="uni-item-view1">
					<view class="uni-item-view-btn">
						<view class="btn" @click="submitClick"><text>提交</text></view>
					</view>
				</view>
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
export default {
	data() {
		return {
			checked: false,
			inputData: {
				nickname:'',
				mobile: '',
				code: '',
				password: '',
				configpwd: '',
				select: ''
			},
			hobby: [
				{
					name: '我已同意',
					value: 0,
					checked:false
				}
			],
			second: 60,
			showText: true,
		};
	},
	methods: {
		getCode() { 
			//倒计时
			this.showText = false;
			var interval = setInterval(() => {
				let times = --this.second;
				this.second = times < 10 ? '0' + times : times; //小于10秒补 0
			}, 1000);
			setTimeout(() => {
				clearInterval(interval);
				this.second = 60;
				this.showText = true;
			}, 60000);
		},
		checkboxChange(e) {
			console.log(e)
			var values = e.detail.value;
			for (var i = 0; i < this.hobby.length; ++i) {
				const item = this.hobby[i];
				if(i == values){
					if (item.checked) {
						this.$set(item, 'checked', false);
					} else {
						this.$set(item, 'checked', true);
					}
				}
			}
		},
		xiyiClick() {
			this.$util.redirectTo('/pages/webview/webview', { type: '6' });
		},
		sendClick() {
			if(!this.showText){
				return
			}
			if (this.check.isNull(this.inputData.mobile)) {
				uni.showToast({
					title: '请填写手机号'
				});
				return;
			}
			this.sendMessageData();
		},
		submitClick() {
			var item = this.hobby[0];
			// if(!item.checked){
			// 	uni.showToast({
			// 		title:"请选择同意协议"
			// 	})
			// 	return
			// }
			// console.log(this.checked);
			// return;
			if (this.check.isNull(this.inputData.nickname)) {
				uni.showToast({
					title: '请填写昵称'
				});
				return;
			}
			if (this.check.isNull(this.inputData.mobile)) {
				uni.showToast({
					title: '请填写手机号'
				});
				return;
			}
			if (this.check.isNull(this.inputData.code)) {
				uni.showToast({
					title: '请填写验证码'
				});
				return;
			}

			if (this.inputData.password != this.inputData.configpwd) {
				uni.showToast({
					title: '新密码与确认密码不一致'
				});
				return;
			}

			this.updatePasswordData();
		},
		sendMessageData() {
			var data = {
				phone: this.inputData.mobile
			};
			this.$refs.loadingCover.show();
			this.http.sendRequest({
				api: this.api.login.captchaSmsApi,
				data: data,
				success: res => {
					console.log(res);
					if (res.code == '10000' && res.data) {
						this.getCode();
					}
					uni.showToast({
						title: res.message
					});
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		updatePasswordData() {
			var data = {
				nickname: this.inputData.nickname,
				phone: this.inputData.mobile,
				password: this.inputData.password
			};
			this.$refs.loadingCover.show();
			this.http.sendRequest({
				api: this.api.login.registerApi,
				data: data,
				success: res => {
					console.log(res);
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					uni.showToast({
						title: res.message
					});
					if (res.code == '10000' && res.data) {
						 // this.$util.redirectToHome(true);
						 uni.navigateBack();
					}
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		}
	}
};
</script>

<style lang="scss">
.uni-back-view {
	margin-top: 32rpx;
	margin-bottom: 32rpx;
	margin-left: 32rpx;
	margin-right: 32rpx;

	padding-top: 32rpx;
	padding-bottom: 32rpx;
	background-color: #fff;
	border-radius: 10rpx;
}
.uni-item-view2 {
	width: 100%;
	height: 90rpx;
	display: flex;
	align-items: center;
	.uni-item-view-xieyi {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		.uni-item-view-xieyi-group{
			.checkbox-list {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-left: 32rpx;
				.checkbox-view{
					transform:scale(0.7)
				}
				.text {
					font-size: 28rpx;
					color: $uni-text-color;
				}
			}
		}
		.text1 {
			margin-left: 8rpx;
			font-size: 28rpx;
			color: $uni-text-color-primary;
		}
	}
}
.uni-item-view1 {
	// width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	// margin-left: 32rpx;
	//     margin-right: 32rpx;
	background-color: #fff;
	.uni-item-view-title {
		display: flex;
		flex-direction: column;
		padding-left: 32rpx;
		padding-right: 32rpx;
		width: 100%;
		margin-top: 64rpx;
		margin-left: 16rpx;
		margin-right: 16rpx;
		.text1 {
			font-size: 28rpx;
			color: $uni-text-color-primary;
		}
		.text2 {
			font-size: 24rpx;
			color: $uni-text-color-grey;
		}
	}
	.uni-item-view-btn {
		width: 100%;
		margin-left: 16rpx;
		margin-right: 16rpx;
		margin-top: 32rpx;
		.btn {
			height: 80rpx;
			// width: 100%;
			background-color: $uni-btn-color-primary;
			color: #fff;
			margin-left: 32rpx;
			margin-right: 32rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
.uni-item-view {
	// width: 100%;
	height: 110rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	// margin-left: 32rpx;
	//     margin-right: 32rpx;
	background-color: #fff;

	.uni-item-view-left {
		width: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		.uni-item-view-left-image {
			width: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 16rpx;
			.image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.uni-item-view-left-input {
			width: 100%;
			.input {
				padding-left: 0rpx;
			}
		}
	}
 
	.uni-item-view-right {
		width: 240rpx;
		background-color: #fff;
		font-size: 28rpx;
		margin-right: 32rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.code-text {
			color: $uni-text-color-primary;
			font-size: 26rpx;
			margin-top: 16rpx;
			margin-bottom: 16rpx;
		}
	}
}
</style>
